Arrow Functions
Arrow functions are shorthand for function expressions
They cannot be named and they only work as function expressions.
They are ideal for shortening callbacks.
[1, 2, 3].forEach(function (n, idx) {
console.log(n, idx);
});
JavaScript
is the same as
[1, 2, 3].forEach((n, idx) => {
console.log(n, idx);
});
JavaScript
Another Arrow Function!
[1, 2, 3, 4, 5].filter(function(n, idx) {
return n % 2 === 0;
});
JavaScript
is the same as
[1, 2, 3, 4, 5].filter((n, idx) => {
return n % 2 === 0;
});
JavaScript
More Arrow Functions!
Arrow Functions have an implicit return if you leave out the curly braces
/* square everything */
let nums = [1, 2, 3];
let arrSquared = nums.map(n => n ** 2); // [1, 4, 9]
JavaScript
Gotcha with Arrow Function
You still need a return if it’s not on one line!
const multiply = (a,b) => {
return a * b;
}
JavaScript
You will sometimes see () around an arrow function - esspecially with modern frameworks!
const multiply = (a,b) => (
a * b
);
JavaScript
If you want to return an object, make sure it’s wrapped in () or on more than one line!
const makeInstructor = (name) => {name:"Colt"}
makeInstructor() // undefined
const makeInstructor2 = (name) => ({name:"Colt"})
makeInstructor2() // {name: "Colt"}
JavaScript
Arrow Functions & this
Arrow Functions do not have their own this context. If your function uses the keyword this, be wary!
You should not be using arrow functions:
In an object method
When you need your own keyword this
Arrow Functions & this - no no’s
Do not use arrow functions inside objects!
const student = {
firstName: "Melissa",
sayHi: () => {
return "Hello " + this.firstName
}
}
JavaScript
student.sayHi() // Hello undefined
The keyword this refers to the global object (window / global) not the student object - that’s not good!
Arrow Functions usefullness
Use arrow functions when you don’t want the keyword this that a function normally creates.
Arrow functions are a replacement for the bind function in the example below.
const student = {
firstName: "Melissa",
sayHi: function() {
setTimeout(() => {
console.log("Hello " + this.firstName)
}, 1000)
}
}
JavaScript
student.sayHi() // Hello Melissa
Arrow Functions Summary
Can only be used as shorthand for anonymous function expressions
Must put parentheses around parameters if there are 0 or 2+ parameters
Return statement is implied if you leave out curly braces
They do not make their own this